<template>
  <Header :activeIndex="activeIndex" />
  <el-container style="margin: 0 50px">
    <el-main>
      <el-input
        v-model="searchParams.productName"
        placeholder="搜索商品"
        style="width: 300px"
      ></el-input>
      <el-button type="primary" @click="searchList" style="margin-left: 5px"
        >搜索</el-button
      >
      <el-button type="warning" @click="rest" style="margin-left: 5px"
        >重置</el-button
      >
      <template> </template>
      <el-table :data="goodsList" style="width: 100%; margin-top: 10px">
        <el-table-column prop="image" label="商品图片">
          <template v-slot="scope">
            <img
              :src="$apiImg+scope.row.image"
              alt="商品图片"
              style="width: 100px; height: 100px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称"></el-table-column>

        <el-table-column prop="price" label="价格"></el-table-column>

        <el-table-column prop="description" label="描述"></el-table-column>

        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button
              type="primary"
              size="small"
              @click="CommLink(scope.row.id)"
              >立即购买</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          v-model:current-page="searchParams.currentPage"
          v-model:page-size="searchParams.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="parseInt(totalItems)"
          @size-change="searchList"
          @current-change="searchList"
        />
      </div>
    </el-main>
  </el-container>
  <Footer />
</template>

<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { reactive, toRefs, ref } from 'vue'
import { listApi } from '@/api/list'
import { useRouter } from 'vue-router'

export default {
  components: {
    Header,
    Footer
  },
  setup() {
    const products = reactive({
      searchParams: {
        currentPage: 1,
        pageSize: 5,
        productName: ''
      },
      totalItems: '',
      goodsList: []
    })
    const router = useRouter()

    const activeIndex = ref('2')

    const CommLink = (id) => {
      router.push({
        name: 'ProductDetail',
        params: { id: id }
      })
    }
    const rest = () => {
      products.searchParams.productName = ''
    }
    const searchList = () => {
      listApi(products.searchParams).then((res) => {
        if (res) {
          products.goodsList = res.data.data
          products.totalItems = res.data.total
        }
      })
    }
    searchList()
    return {
      ...toRefs(products),
      activeIndex,
      searchList,
      rest,
      CommLink
    }
  },

  methods: {}
}
</script>

<style scoped>
.flex-grow {
  flex-grow: 1;
}
.page {
  margin-top: 100px;
}
</style>
